<!DOCTYPE html>
<html>
<head>
    <title>Task Manager</title>

    <link href="styles/kendo/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="styles/taskmanager.css" rel="stylesheet" />

    <script src="js/cordova-1.5.0.js"></script>
    <script src="js/kendo/jquery.min.js"></script>
    <script src="js/kendo/kendo.mobile.min.js"></script>
</head>
<body onload="onLoad()">
	<!-- PAGES -->
	
	<!-- Home -->
    <div id="home" data-role="view" data-layout="layout" data-title="Task Manager">
		<ul id="home-listview" data-role="listview">
			<li><a href="#sprints">Sprints</a></li>
			<li><a href="#developers">Developers</a></li>
		</ul>
	</div>
	
	<!-- Sprints -->
	<div id="sprints" data-role="view" data-layout="layout" data-title="Sprints" data-init="TaskManager.Sprints.init">
		<ul id="sprints-listview" data-role="listview">
			<li>Loading...</li>
		</ul>
	</div>
	
	<!-- Sprint -->
	<div id="sprint" data-role="view" data-layout="layout" data-title="Sprints" data-show="TaskManager.Sprint.show">
		<header data-role="header">
			<div data-role="navbar">
				<a data-align="left" data-role="button" class="nav-button" href="#sprints">Back</a>
				<span data-role="title">Sprint</span>
				<a data-align="right" data-role="button" class="nav-button" onclick="TaskManager.Sprint.save();">Save</a>
			</div>
		</header>
		
		<h2 id="sprint-save-results" style="display:none;position:absolute;"></h2>

		<input id="sprint-id" type="hidden" />

		<h2>Details</h2>
		<ul id="sprint-fields" data-role="listview">
			<li>
				Start:
				<input id="sprint-start-date" type="date"/>
			</li>
			<li>
				End:
				<input id="sprint-end-date" type="date"/>
			</li>
		</ul>
		
		<h2>Tasks</h2>
		<ul id="sprint-tasks-listview" data-role="listview">
			<li>Loading...</li>
		</ul>
	</div>
	
	<!-- Task -->
	<div id="task" data-role="view" data-layout="layout" data-title="Task" data-show="TaskManager.Task.show">
		<header data-role="header">
			<div data-role="navbar">
				<a id="task-back" data-align="left" data-role="button" class="nav-button" href="#sprint">Back</a>
				<span data-role="title">Sprint</span>
				<a data-align="right" data-role="button" class="nav-button" onclick="TaskManager.Task.save();">Save</a>
			</div>
		</header>
		
		<h2 id="task-save-results" style="display:none;position:absolute;"></h2>

		<input id="task-id" type="hidden" />
		
		<ul id="task-fields" data-role="listview">
			<li>
				Type:
				<select id="task-type" class="tm-input">
					<option value="0">Scenerio</option>
					<option value="1">Change Request</option>
				</select>
			</li>
			<li>
				Desc.:
				<input id="task-description" type="text" class="tm-input"/>
			</li>
			<li>
				Dev.:
				<select id="task-assignedto" class="tm-input">
				</select>
			</li>
			<li>
				Hours:
				<input id="task-estimated-hours" type="number" class="tm-input"/>
			</li>
			<li>
				Completed:
				<input id="task-completed" type="date" class="tm-input"/>
			</li>
		</ul>
	</div>
	
	<!-- Developers -->
	<div id="developers" data-role="view" data-layout="layout" data-title="Developers" data-init="TaskManager.Developers.init">
		<ul id="developers-listview" data-role="listview">
			<li>Loading...</li>
		</ul>
	</div>

	<!-- Developer -->
	<div id="developer" data-role="view" data-layout="layout" data-title="Developer" data-show="TaskManager.Developer.show">
		<header data-role="header">
			<div data-role="navbar">
				<a data-align="left" data-role="button" class="nav-button" href="#developers">Back</a>
				<span data-role="title">Developer</span>
				<a data-align="right" data-role="button" class="nav-button" onclick="TaskManager.Developer.save();">Save</a>
			</div>
		</header>

		<h2 id="developer-save-results" style="display:none;position:absolute;"></h2>

		<input id="developer-id" type="hidden" />
		
		<ul id="developer-fields" data-role="listview">
			<li>
				First:
				<input id="developer-firstname" type="text"/>
			</li>
			<li>
				Last:
				<input id="developer-lastname" type="text"/>
			</li>
		</ul>
	</div>
	
	<!-- Settings -->
	<div id="settings" data-role="view" data-layout="layout" data-title="Settings">
		<h2>Settings</h2>
	</div>

	<!-- LAYOUTS -->
	
	<div data-role="layout" data-id="layout">
		<footer data-role="footer">
			<div data-role="tabstrip">
				<a data-icon="compose" href="#home">Home</a>
				<a data-icon="organize" href="#sprints">Sprints</a>
				<a data-icon="contacts" href="#developers">Developers</a>
				<!-- a data-icon="settings" href="#settings">Settings</a -->
			</div>
		</footer>
	</div>
	
	
	<!-- TEMPLATES -->
	
	<script id="sprints-listview-template" type="text/x-kendo-template">
		<a href="\#sprint?id=#= SprintId #" class="km-listview-link" data-role="listview-link">Sprint #= SprintId #</a>
	</script>

	<script id="developers-listview-template" type="text/x-kendo-template">
		<a href="\#developer?id=#= DeveloperId #" class="km-listview-link" data-role="listview-link">#= FirstName + ' ' + LastName #</a>
	</script>

	<script id="sprint-tasks-listview-template" type="text/x-kendo-template">
		<a href="\#task?id=#= TaskId #" class="km-listview-link" data-role="listview-link">#= Description #</a>
	</script>
	
	
	<!-- SCRIPTS -->
	
	<script src="js/json-arrays.js"></script>
	<script src="js/platform.specific.js"></script>
	<script src="js/taskmanager.js"></script>
	<script src="js/taskmanager.dataaccess.js"></script>
	<script src="js/taskmanager.sprints.js"></script>
	<script src="js/taskmanager.task.js"></script>
	<script src="js/taskmanager.developers.js"></script>
    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body, { platform: _platform });
		
		onLoad = function() {
		}
	</script>
</body>
</html>